<template>
  <div class="home">
    <el-container>
      <el-header style="height: 80px">
        <MyHeader></MyHeader>
      </el-header>
      <el-container class="headAndMain">
        <el-aside>
          <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group> -->
          <iconpark-icon class="changeBt" name="shouqi" @click="changeIsColl"></iconpark-icon>
          <!-- <button class="changeBt" @click="changeIsColl">《--》</button> -->
          <LeftMenu :isCollapse="isCollapse" :list="list"></LeftMenu>
        </el-aside>
        <el-main>
          <div class="main"> 
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import LeftMenu from "@/components/LeftMenu";
import MyHeader from "@/components/MyHeader";
export default {
  name: "Home",
  components: {
    MyHeader,
    LeftMenu,
  },
  data() {
    return {
      isCollapse: false,
      list: [
        {
          self: {
            index: "GisMap",
            icon: "GISditu",
            title: "GIS地图",
            to: "/GisMap",
            // <iconpark-icon name="GISditu"></iconpark-icon>
          },
          child: [
            {
              self: { index: "Map", title: "地图", to: "/Map" },
              child: [],
            },
          ],
        },
        {
          self: {
            index: "d3",
            icon: "Cesium",
            title: "D3图",
            to: "/d3",
            // <iconpark-icon name="GISditu"></iconpark-icon>
          },
          child: [
            {
              self: { index: "d3index1", title: "d3index1", to: "/d3index1" },
              child: [],
            },
            {
              self: { index: "d3index2", title: "d3index2", to: "/d3index2" },
              child: [],
            },
            {
              self: { index: "d3index3", title: "d3index3", to: "/d3index3" },
              child: [],
            },
            {
              self: { index: "d3index4", title: "d3index4", to: "/d3index4" },
              child: [],
            },
          ],
        },
        {
          self: {
            index: "Cesium",
            icon: "Cesium",
            title: "Cesium地图",
            to: "/Cesium",
            // <iconpark-icon name="GISditu"></iconpark-icon>
          },
          child: [
            {
              self: { index: "Cesium1", title: "Cesium1", to: "/Cesium1" },
              child: [],
            },
          ],
        }
      ],
    };
  },
  methods: {
    changeIsColl() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>

<style scoped>
::v-deep ::-webkit-scrollbar {
  display: none;
}
.home {
  width: 100%;
  height: 100vh;
  background-color: #002127;
}
::v-deep .el-header {
  padding: 0;
  margin: 0;
  height: 80px;
  background-color: #002127;
}
.el-container.is-vertical {
  height: 100%;
}
.headAndMain {
  height: calc(100% - 80px);
}
.changeBt {
  position: absolute;
  top: 26px;
  left: 180px;
}
.el-aside {
  background-color: #002127;
  width: auto !important;
}
::v-deep .el-menu {
  width: 200px;
  border: none;
}
::v-deep .el-menu--collapse {
  width: 64px;
}
.el-main {
  background-color: #0c323a;
}
.main {
  width: 100%;
  height: 100%;
  background-color: #002127;
  /* background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0)
  ); */
  background-color: #0c323a;
  border-radius: 10px;
}
</style>
